<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>西安市输出吸纳技术</title>
  <script src="../../components/echarts-4.0.4.min.js"></script>
  <style>
    body,
    html {
      padding: 0;
      margin: 0;
      background: #0A0F23;
      width: 100%;
      height: 100%;
    }

  </style>
</head>

<body>
  <div style="width: 100%;height: 100%;" id="turnover"></div>
</body>
<script>
  var turnover = echarts.init(document.getElementById('turnover'));
  var titleData = "近五年西安市技术输出及吸纳情况";

  var dataMap = {};

  dataMap.dataVisit = {
    //金额
    '输出金额': [471.76, 567.25, 657.82, 732.81, 848.42],
    '吸纳金额': [216.61, 172.49, 195.34, 238.6, 370.3],
    //项数
    '输出项': [18463, 25169, 21395, 19421, 29440],
    '吸纳项': [10528, 11473, 9356, 11198, 14518]
  };

  var barOption = {
    baseOption: {
      timeline: {
        show: false,
        axisType: 'category',
        loop: true,
        autoPlay: true,
        playInterval: 1000,
        label: {
          normal: {
            textStyle: {
              color: '#fff'
            }
          },
          position: 14
        },
        lineStyle: {
          color: '#fff'
        },
        controlStyle: {
          show: false
        },
        top: 0,
        data: [
          '2013年', '2014年', '2015年', '2016年', '2017年'
        ]
      },
      legend: {
        left: '5%',
        top: '10%',
        data: ['输出合同额', '吸纳合同额','输出合同数', '吸纳合同数'],
        textStyle: {
          color: '#fff',
          fontSize: 16
        },
        itemWidth: 15,
        itemHeight: 10
      },
      tooltip: {
        trigger: 'none',
        axisPointer: {
          type: 'shadow',
        }
      },
      grid: {
        left: '5%',
        right: '5%',
        bottom: '7%',
        top: '27%',
        containLabel: true
      },
      xAxis: [{
        type: 'category',
        axisLine: {
          lineStyle: {
            color: '#fff'
          }
        },
        axisTick: {
          lineStyle: {
            color: '#fff'
          }
        },
        axisLabel: {
          interval: 0,
          textStyle: {
            color: '#fff',
            fontSize: 16
          }
        },
        splitLine: {
          show: false
        },
        data: [
          '2013年', '2014年', '2015年', '2016年', '2017年'
        ]
      }],
      yAxis: [{
          type: 'value',
          // min: 0,
          max: function(value) {
            return value.max + 80;
          },
          splitNumber: 10,
          name: '亿元',
          nameTextStyle: {
            color: "#FFF",
            verticalAlign: 'bottom',
            fontSize: 16
          },
          //interval: 10,
          axisLine: {
            lineStyle: {
              color: '#fff'
            }
          },
          axisTick: {
            lineStyle: {
              color: '#fff'
            }
          },
          axisLabel: {
            interval: 0,
            textStyle: {
              color: '#fff',
              fontSize: 16
            }
          },
          splitLine: {
            show: false
          }
        },
        {
          type: 'value',
          // max: 100,
          // min: 0,
          name: '份',
          nameTextStyle: {
            color: "#FFF",
            verticalAlign: 'bottom',
            fontSize: 16
          },
          //interval: 150,
          axisLine: {
            lineStyle: {
              color: '#fff'
            }
          },
          axisLabel: {
            interval: 0,
            textStyle: {
              color: '#fff',
              fontSize: 16
            }
          },
          splitLine: {
            show: false
          }
        }

      ],
      series: [{
          name: '输出合同额',
          type: 'bar',
          barWidth: 25,
          barGap: 0,
          data: dataMap.dataVisit['输出金额'],
          itemStyle: {
            normal: {
              color: '#0c8bd1',
              fontSize: 22
            }
          }
        },
        {
          name: '输出合同数',
          type: 'line',
          smooth: false,
          yAxisIndex: 1,
          data: dataMap.dataVisit['输出项'],
          itemStyle: {
            normal: {
              color: '#f8849b',
              fontSize: 22
            }
          }
        },
        {
          name: '吸纳合同额',
          barGap: 0,
          type: 'bar',
          barWidth: 25,
          data: dataMap.dataVisit['吸纳金额'],
          itemStyle: {
            normal: {
              color: '#0de2ff',
              fontSize: 22
            }
          }
        },
        {
          name: '吸纳合同数',
          type: 'line',
          smooth: false,
          yAxisIndex: 1,
          data: dataMap.dataVisit['吸纳项'],
          itemStyle: {
            normal: {
              color: '#f7e46c',
              fontSize: 22
            }
          }
        }
      ]
    },
    options: [{
      title: {
        text: titleData,
        left: 'center',
        top: "0%",
        textStyle: {
          color: '#fff',
          fontSize: 22
        }
      }
    }]
  };

  turnover.setOption(barOption);

</script>

</html>
